<template>
  <div style="background-color: #f5f6f7;min-height: 100vh;">
    <div class="top_bg"></div>
    <div
      class="fuel_remit_wraper"
      :class="[showKeyboard || showRemitPage ? 'active' : '']"
    >
      <div class="fuel_remit_nav" @click="goFuelPage()">
        <!-- <div class="icon_fixed"></div> -->
        <div class="name">{{ stationName }}</div>
        <div class="icon_right"></div>
      </div>
      <div class="remit_container">
        <div class="oilGun_container">
          <div class="fuel_remit_top" :class="[showRemitPage ? 'active' : '']">
            <!-- 金额 -->
            <div class="amount_of_money">
              <div class="amount_of_money_title">金额</div>
              <van-field
                :readonly="appType == 3 ? true : false"
                v-model="priceValue"
                @click="onFocusField()"
                @focus="onFocusField()"
                ref="fieldRef"
                label="¥"
                class="field_price"
                :class="[!priceValue ? 'placeStyle' : '']"
                placeholder="加油金额(5-50000)"
              >
                <template #button>
                  <div
                    v-show="showKeyboard && !!priceValue"
                    class="icon_close"
                    @click="deletePrice()"
                  ></div>
                  <div
                    class="discountAmt"
                    v-show="CouponData.discountAmt > 0 && showRemitPage"
                  >
                    立减￥{{ verticalPrice }}
                  </div>
                </template>
              </van-field>
            </div>
            <!-- 推荐价格 -->
            <div
              class="divider_line input"
              :class="[showKeyboard ? 'active' : '']"
              v-if="appType != 3"
            >
              <div class="price_list" v-show="showKeyboard && !priceValue">
                <div
                  class="price_value"
                  @click="priceChange(item)"
                  v-for="(item, index) in priceList"
                  :key="index"
                >
                  {{ item }}
                </div>
              </div>
            </div>
            <!-- 油枪信息 -->
            <div class="oilGun_info" @click="goOilGunSelect()">
              <div class="oilGun_info_top">
                <div class="oilGun_title">油枪</div>
                <div class="oilGun_placeholder" v-if="!oilGunNum">
                  请选择油枪号
                </div>
                <div class="oilGun_value" v-else>
                  <span class="num">{{ oilGunNum }}</span>
                  <span class="line">&frasl;</span>
                  <span class="name">{{ oilGunName }}</span>
                </div>
                <template v-if="appType != 3">
                  <div
                    v-show="oilGunStatus && oilGunNum"
                    class="oli_icon_close"
                    @click="changeOilGunValue()"
                  ></div>
                </template>
              </div>
              <div class="price" v-show="showRemitPage && !!oilOfficialPrice">
                单价：<span class="price_color"
                  >￥{{ oilOfficialPrice }}/L</span
                >
              </div>
            </div>
            <div
              class="divider_line"
              :class="[oilGunStatus ? 'active' : '']"
            ></div>
            <!-- 选择油枪号 -->
            <div
              class="oilGun_main_wraper"
              v-show="oilGunStatus && appType != 3"
            >
              <!-- <div class="oilGun_main_title">请选择油枪号</div> -->
              <div class="oilGun_main_content">
                <div
                  class="main_card"
                  :class="[oilGunNum === item.gunName ? 'active' : '']"
                  v-for="item in staOilGunList"
                  :key="item.oilId"
                  @click="changeCard(item)"
                >
                  <div class="gunName">{{ item.gunName }}</div>
                  <span class="line">&frasl;</span>
                  <div class="oilName">
                    {{ item.oil.oilName + item.oil.oilClass }}
                  </div>
                  <div class="active_icon" v-show="showRemitPage">
                    <img src="../static/fuel/pay-active-icon.png" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 支付方式 -->
          <div
            class="remit_page_container"
            v-show="showRemitPage && !showCouponList"
          >
            <div class="remit_page_wraper">
              <div class="stored_radio">
                <div class="stored_card">
                  <div class="icon stored"></div>
                  <div>
                    <div class="stored_title">储值卡</div>
                    <div class="stored_amt">
                      卡余额：{{ CouponData.balance || 0 }}
                    </div>
                  </div>
                </div>
                <!-- <input
                  type="radio"
                  name="radios"
                  value="1"
                  @click="changeStoredVale('1')"
                  v-model="radioParams"
                /> -->
                <van-radio-group v-model="radioParams">
                  <van-radio
                    name="1"
                    value="1"
                    @click="changeStoredVale('1')"
                    v-model="radioParams"
                    checked-color="#FD6B00"
                  ></van-radio>
                </van-radio-group>
              </div>

              <div
                class="divider_line"
                :class="[oilGunStatus ? 'active' : '']"
              ></div>
              <div class="stored_radio">
                <div class="stored_card">
                  <div class="icon vx"></div>
                  <div class="stored_title">微信</div>
                </div>
                <!-- <input
                  type="radio"
                  name="radios"
                  value="2"
                  @click="changeStoredVale('2')"
                  v-model="radioParams"
                /> -->
                <van-radio-group v-model="radioParams">
                  <van-radio
                    name="2"
                    value="2"
                    @click="changeStoredVale('2')"
                    v-model="radioParams"
                    checked-color="#FD6B00"
                  ></van-radio>
                </van-radio-group>
              </div>
            </div>
          </div>

          <!-- 优惠劵列表 -->
          <div class="coupon_info" v-show="showRemitPage">
            <img src="../static/fuel/pay-yhq.png" />
            <van-coupon-cell
              :coupons="coupons"
              :chosen-coupon="chosenCoupon"
              @click="clickCoupons((CouponData.couponList || []).length === 0)"
            />
          </div>
        </div>
      </div>
      <!-- 数字键盘 -->
      <van-number-keyboard
        :class="[Number(priceValue) >= 5 ? '' : 'disabold']"
        v-model="priceValue"
        :maxlength="6"
        :show="showKeyboard"
        theme="custom"
        close-button-text="确定"
        extra-key="."
        @input="$refs.fieldRef.blur()"
        @close="onCloseKeyboard()"
      />
      <!-- 购物车 -->
      <van-popup
        v-model:show="showBottom"
        position="bottom"
        closeable
        :style="{ height: '80%' }"
      >
        <div class="popup_container">
          <div class="title">购物车</div>
          <div class="popup_main">
            <div class="popup_name">油品</div>
            <div class="popup_price">
              <div class="tag">{{ oilGunNum }}号油枪{{ oilGunName }}</div>
              <div class="price">￥{{ newPrice }}</div>
            </div>
            <!-- 优惠劵 -->
            <div v-show="false" class="popup_preferential"></div>
          </div>
        </div>
      </van-popup>
      <!-- 优惠劵弹窗 -->
      <van-popup
        v-model:show="showCouponList"
        closeable
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
      >
        <div class="coupons_popup_container">
          <div class="title">优惠劵</div>
          <div class="van_popup_main">
            <div
              class="popup_list"
              @click="changeRadioCoupon(index)"
              v-for="(item, index) in coupons"
              :key="item.id"
            >
              <div
                class="left_popup"
                :class="[item.couponType === '1' ? '' : 'red']"
              >
                <div class="valueDesc">{{ item.valueDesc }}</div>
                <div class="condition">{{ item.condition }}</div>
              </div>
              <div class="right_popup">
                <div
                  class="name"
                  :class="[item.couponType === '1' ? '' : 'red']"
                >
                  {{ item.name }}
                </div>
                <div class="time">截止：{{ item.time }}</div>
              </div>
              <div class="radio">
                <input
                  type="radio"
                  name="couponsRadio"
                  :value="index"
                  v-model="radioCouponsValue"
                />
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 底部支付 -->
    <div class="bottom_fix_bar" v-show="showRemitPage && !showCouponList">
      <div class="fix_bar_main">
        <div class="car_container">
          <!-- <div class="icon_car" @click="showBottom = !showBottom">
          <van-icon name="cart-o" size=".6rem" badge="1" />
        </div> -->
          <div class="newPrice">
            <div class="price_bar">
              总计：
              <!-- <span class="price_value">￥{{ newPrice }}</span> -->
              <span class="price_value">￥{{ this.CouponData.amt }}元</span>
              <span
                style="color: #ccc;font-size: 0.2rem;text-decoration: line-through;"
                >¥{{ this.CouponData.finalAmount }}</span
              >
            </div>
            <!-- <div class="price_coupon" v-show="!!couponPrice || CouponData.discountAmt > 0">优惠
            <span class="coupon_value">
              ￥{{ NewCouponPrice }}
            </span>
          </div> -->
            <div class="price_coupon">
              服务费
              <span> ￥{{ this.CouponData.channelFeePayer }} 元 </span>
            </div>
          </div>
        </div>
        <van-button
          @click="submitRemit()"
          :disabled="radioParams === '1' && newPrice > CouponData.balance"
          type="warning"
          round
          >立即支付</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { getAuthen } from "@/utils/getAuthen";
import wx from "weixin-js-sdk";
import Qr from "@/components/QrCode";
import Vue from "vue";
import {
  NumberKeyboard,
  Field,
  Icon,
  Popup,
  Toast,
  Button,
  CouponCell,
  Radio,
  RadioGroup
} from "vant";
Vue.use(NumberKeyboard);
Vue.use(Field);
Vue.use(Icon);
Vue.use(Popup);
Vue.use(Toast);
Vue.use(Button);
Vue.use(CouponCell);
Vue.use(Radio);
Vue.use(RadioGroup);

export default {
  head() {
    return {
      title: "一键加油"
    };
  },
  data() {
    return {
      radioParams: "2",
      radioCouponsValue: "-1",
      showKeyboard: false, // 键盘显示
      showBottom: false, // 购物车
      showRemitPage: false, // 支付界面
      showCouponList: false, // 优惠劵
      staOilGunList: [
        {
          oilId: 16,
          oilOfficialPrice: 2,
          oilStationPrice: 3,
          stationId: 234,
          gunName: "1",
          oil: {
            oilClass: "柴油",
            oilId: 16,
            oilName: "0#",
            oilType: "(VI)",
            unitCode: "1"
          }
        },
        {
          oilId: 20,
          oilOfficialPrice: 7,
          oilStationPrice: 7,
          stationId: 234,
          gunName: "2",
          oil: {
            oilClass: "汽油",
            oilId: 20,
            oilName: "92京标",
            oilType: "京标",
            unitCode: "1"
          }
        },
        {
          oilId: 21,
          oilOfficialPrice: 7,
          oilStationPrice: 7,
          stationId: 234,
          gunName: "3",
          oil: {
            oilClass: "汽油",
            oilId: 21,
            oilName: "92京标",
            oilType: "京标",
            unitCode: "1"
          }
        }
      ], // 油枪列表
      oilGunNum: "", // 油枪号
      oilGunName: "", // 油枪名字结合
      oilName: "", // 油枪名字
      oilClass: "", // 油枪类型
      oilId: "", // 油ID
      oilGunStatus: true, // 油枪状态
      priceValue: "", // 价格
      oilOfficialPrice: "", // 单价
      priceList: [100, 200, 300, 400],
      CouponData: {}, // 优惠劵信息
      chosenCoupon: -1, // 优惠劵索引
      couponPrice: "", // 优惠金额
      verticalPrice: "", // 立减
      couponNo: "", // 优惠劵编号
      couponUserId: "", // 优惠卷id
      axiosNum: 0,
      stationName: "测试油站", // 临时添加的，真正页面的时候，不需要折行删除
      appType: "1" // 临时添加的，真正页面的时候，不需要折行删除
    };
  },
  components: {
    Qr: Qr
  },
  computed: {
    coupons() {
      console.log(this.CouponData);
      const { couponList = [] } = this.CouponData;
      return couponList.map(item => {
        // couponType  1现金券2折扣券 couponAmt 优惠金额 newAmtByCoupon: 优惠后的金额 issueName:发放方式名称
        // 如果 couponType 为2时 couponAmt 为折扣百分比 couponThresholdAmt  最低消费金额
        const couponAmt =
          item.couponType === "1"
            ? `${item.couponAmt} ￥`
            : `${item.couponAmt} %`;
        const value =
          item.couponType === "1"
            ? `${item.couponAmt * 100}`
            : `${(Number(this.priceValue) / item.couponAmt) * 100}`;
        return {
          ...item,
          id: item.couponId,
          condition: `满${item.couponThresholdAmt}元可用`,
          name: item.couponType === "1" ? "立减劵" : "折扣劵",
          time: item.couponEffectiveTime,
          valueDesc: couponAmt,
          couponUserId: item.couponUserId,
          value: Number(value)
        };
      });
    },
    newPrice() {
      if (!!this.couponPrice) {
        return (
          Number(this.priceValue) -
          this.couponPrice -
          this.verticalPrice
        ).toFixed(2);
      }
      return Number(this.priceValue - this.verticalPrice).toFixed(2);
    },
    // 优惠总价格
    NewCouponPrice() {
      if (!!this.couponPrice) {
        return (Number(this.couponPrice) + this.verticalPrice).toFixed(2);
      }
      return (this.verticalPrice || 0).toFixed(2);
    },
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  created() {
    if (!this.userInfo.enterpriseName) {
      getAuthen("", "remit");
      return false;
    }
    let currentUrl = window.location.href;
    let urlObj = this.getUrlParams(currentUrl);
    this.stationId = urlObj.stationId;
    this.userId = urlObj.userId;
    this.stationName = urlObj.stationName;
    this.appType = urlObj.appType; // 来源类型3:pos机
    if (this.appType == 3) {
      this.oilGunName = urlObj.oilName; // 油枪名
      this.oilGunNum = urlObj.gunName; // pos油枪
      this.priceValue = urlObj.price / 100; // 初始金额
      this.showKeyboard = false;
      this.showRemitPage = true;
      this.showCouponList = false;
      this.radioParams = "2";
      this.orderRandomId = urlObj.orderRandomId;
      this.getPayPosInfo();
    }
    this.init();
  },
  methods: {
    // 截取url参数
    getUrlParams(url) {
      let urlStr = url.split("?")[1];
      const urlSearchParams = new URLSearchParams(urlStr);
      const result = Object.fromEntries(urlSearchParams.entries());
      return result;
    },
    init() {
      // 获取油站信息列表
      this.$axios
        .$get("/selectStaOilGunList", {
          params: {
            stationId: this.stationId,
            userId: this.userId
          }
        })
        .then(res => {
          if (res.retCode != 0) {
            alert(res.message);
            throw new Error(res.message);
            return false;
          }
          this.staOilGunList = res.data.staOilGunList || [];
        });
      // .catch((err) => {
      //   // alert(err);
      //   if (this.axiosNum === 3) {
      //     alert('网络波动请重新扫码进入')
      //     return false
      //   }
      //   if (this.axiosNum < 3) {
      //     this.axiosNum++
      //     this.init()
      //   }
      // });
    },
    // 改变油站卡片
    changeCard(item) {
      this.oilGunNum = item.gunName;
      this.oilGunName = item.oil.oilName + item.oil.oilClass;
      this.oilName = item.oil.oilName;
      this.oilClass = item.oil.oilClass;
      this.oilId = item.oilId;
      this.oilOfficialPrice = item.oilStationPrice;
      this.oilGunStatus = false;
      this.$refs.fieldRef.focus();
      this.showRemitPage = false;
    },

    // 删除金额
    deletePrice() {
      if (this.appType != 3) {
        this.priceValue = "";
      }
    },

    // 删除油枪
    changeOilGunValue() {
      if (this.appType != 3) {
        this.oilGunNum = "";
        this.oilGunName = "";
        this.oilName = "";
        this.oilClass = "";
        this.oilId = "";
        this.oilOfficialPrice = "";
      }
    },

    // 点击价格列表
    priceChange(item) {
      this.priceValue = item;
      this.$refs.fieldRef.blur();
      this.showKeyboard = false;
      this.showRemitPage = true;
      this.radioParams = "2";
      this.getPayInfo();
    },

    clickCoupons(status) {
      if (status) {
        return;
      }
      this.showCouponList = true;
    },

    // 点击优惠劵
    changeRadioCoupon(index) {
      this.chosenCoupon = index;
      this.showCouponList = false;
      this.radioCouponsValue = index;
      this.couponPrice = (this.coupons[index].value / 100).toFixed(2);
      this.couponNo = this.coupons[index].couponNo;
      this.couponUserId = this.coupons[index].couponUserId;
      console.log(this.coupons[index]);
      this.updateOrderByCoupon();
    },

    // 调取优惠劵订单
    updateOrderByCoupon() {
      console.log("updateOrderByCoupon函数出发");
      this.verticalPrice = "";
      const {
        oilGunNum,
        phone,
        openId,
        stationId,
        newPrice,
        oilId,
        couponNo,
        couponUserId
      } = this;
      const { ordNo } = this.CouponData;
      let cardFlag = "2";
      if (this.radioParams == "1") {
        cardFlag = "2";
      } else if (this.radioParams == "2") {
        cardFlag = "1";
      }
      this.$axios
        .$post("/updateOrderByCoupon", {
          aliUserId: "1",
          appType: "1",
          cardFlag,
          gunName: oilGunNum,
          mobilePhone: phone,
          oilId,
          openId: openId,
          couponNo,
          orderNo: ordNo,
          payType: "wx",
          receivableAmt: newPrice,
          stationId,
          version: "1.0",
          couponUserId
        })
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.ordNo = res.data.ordNo;
            this.verticalPrice = res.data.discountAmt || 0;
          } else {
            this.radioParams = "2";
            throw new Error("储值卡无法交易");
          }
        })
        .catch(function(error) {
          Toast({
            message: "确认订单信息失败，请重试"
          });
          console.log(error);
        });
    },
    // 点击储值卡
    changeStoredVale(val) {
      console.log("点击单选按钮了吗");
      this.radioParams = val;
      console.log(this.radioParams, "5555");
      this.updateOrderByCoupon();
    },

    // 回到选择油枪的页面
    goOilGunSelect() {
      if (this.appType != 3) {
        this.oilGunStatus = true;
        this.showKeyboard = false;
        this.showRemitPage = false;
      }
    },

    // 返回上一页
    goFuelPage() {
      if (!this.userId) {
        this.$router.replace({ path: `/${this.enterpriseId}/fuel` });
        this.$router.go(-1);
      }
    },

    // 确认金额
    onCloseKeyboard() {
      if (Number(this.priceValue) < 5) {
        return;
      }
      this.getPayInfo();
      this.$refs.fieldRef.blur();
      this.showKeyboard = false;
      this.showRemitPage = true;
      this.radioParams = "2";
    },

    // pos
    getPayPosInfo() {
      // let ua = window.navigator.userAgent.toLowerCase();
      // //判断是不是微信
      // if (ua.match(/MicroMessenger/i) == "micromessenger") {
      //   // 微信
      //   console.log('微信');
      // }
      // //判断是不是支付宝
      // if (ua.match(/AlipayClient/i) == "alipayclient") {
      //   //支付宝
      //   console.log('支付宝');
      // }
      this.verticalPrice = "";
      this.couponPrice = "";
      this.chosenCoupon = -1;
      this.couponUserId = "";
      this.couponNo = "";
      const { oilGunNum, phone, openId, stationId, newPrice } = this;
      this.$axios
        .$post("/createOrder", {
          aliUserId: "1",
          appType: this.appType,
          cardFlag: "1",
          gunName: this.oilGunNum,
          mobilePhone: phone,
          newCreatefalg: "1",
          openId: openId,
          orderOriginType: "2",
          payType: "wx",
          receivableAmt: this.priceValue,
          stationId,
          version: "1.0",
          userId: this.userId,
          orderRandomId: this.orderRandomId
        })
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.verticalPrice = res.data.discountAmt || 0;
          }
        })
        .catch(function(error) {
          Toast({
            message: "确认订单信息失败，请重试"
          });
          console.log(error);
        });
    },
    // 获取订单信息
    getPayInfo() {
      this.verticalPrice = "";
      this.couponPrice = "";
      this.chosenCoupon = -1;
      this.radioCouponsValue = "-1";
      this.couponUserId = "";
      this.couponNo = "";
      const { oilGunNum, phone, openId, stationId, newPrice } = this;
      this.$axios
        .$post("/createOrder", {
          aliUserId: "1",
          appType: "1",
          cardFlag: "1",
          gunName: oilGunNum,
          mobilePhone: phone,
          newCreatefalg: "1",
          openId: openId,
          orderOriginType: "4",
          payType: "wx",
          receivableAmt: newPrice,
          stationId,
          version: "1.0",
          userId: this.userId
        })
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.verticalPrice = res.data.discountAmt || 0;
          }
        })
        .catch(error => {
          Toast({
            message: "确认订单信息失败，请重试"
          });
          this.CouponData = {};
          console.log(error);
        });
    },

    // input获取焦点
    onFocusField() {
      if (this.appType == 3) {
        return;
      }
      if (!this.oilGunNum || !this.oilGunName) {
        this.$refs.fieldRef.blur();
        return;
      }
      // 不调动手机键盘
      this.$refs.fieldRef.blur();
      this.oilGunStatus = false;
      this.showKeyboard = true;
      this.showRemitPage = false;
    },

    // 支付
    submitRemit() {
      const _this = this;
      const { openId, stationId } = this;
      let { ordNo } = this.CouponData;
      console.log(this.CouponData);
      if (this.radioParams === "2") {
        //根据接口返回的数据，在微信内拉起公众号支付，进行付款操作
        let data = {
          aliUserId: "1",
          newCouponFalg: "1",
          openId,
          ordNo,
          stationId
        };
        let payUrl = "/toThirdPayV2";
        this.$axios
          .post(payUrl, data)
          .then(function(response) {
            if (response.data.retCode === 0) {
              const data = response.data.data;
              if (data.thirdPayment === "5") {
                window.location.href = data.redirectUrl;
              } else {
                WeixinJSBridge.invoke(
                  "getBrandWCPayRequest",
                  {
                    appId: data.payAppId,
                    timeStamp: data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: data.paynonceStr, // 支付签名随机串，不长于 32
                    package: data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: data.paySign // 支付签名
                  },
                  function(res) {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      if (_this.couponUserId) {
                        _this.$axios
                          .post("/updateCouponUser", {
                            couponUserId: _this.couponUserId
                          })
                          .then(res => {
                            console.log(res);
                          });
                      }
                      Toast("支付成功");
                      _this.$router.replace({
                        path: `/${_this.enterpriseId}/fuel/success?ordNo=${ordNo}`
                      });
                    } else {
                      _this.goOilGunSelect();
                      Toast("支付失败，请重试");
                    }
                  }
                );
              }
            } else {
              _this.goOilGunSelect();
              Toast({
                message: "获取支付信息失败，请重试"
              });
            }
          })
          .catch(function(error) {
            _this.goOilGunSelect();
            Toast({
              message: "获取下单信息失败，请重试"
            });
            console.log(error);
          });
      } else if (_this.radioParams === "1") {
        _this.$axios
          .$get("/newDzkCouponPaySetV3", {
            params: {
              ordNo,
              couponUserId: _this.couponUserId
            }
          })
          .then(res => {
            if (res.retCode != 0) {
              _this.goOilGunSelect();
              throw new Error("储值卡支付失败");
            } else {
              Toast("支付成功");
              _this.$router.replace({
                path: `/${_this.enterpriseId}/fuel/success?ordNo=${ordNo}`
              });
            }
          })
          .catch(err => {
            _this.goOilGunSelect();
            alert(err);
          });
      } else {
        _this.goOilGunSelect();
        return;
      }
    }
  }
};
</script>

<style lang="scss">
.top_bg {
  width: 100vw;
  height: 4rem;
  background: url("../static/fuel/pay-bg.png") no-repeat;
  background-size: 100% 100%;
}
.fuel_remit_wraper {
  box-sizing: border-box;
  // min-height: 100vh;

  width: 90vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0.3rem;

  // &.active {
  //   // background-color: #fff;
  // }

  // 数字键盘按钮主题色
  // .van-key--blue {
  //   background-color: #58bd6d;
  // }

  .fuel_remit_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.32rem 0.24rem;
    background-color: #fff;
    border-bottom: 2px dashed #f5f5f5;
    border-radius: 0.3rem 0.3rem 0rem 0rem;

    .icon_fixed {
      width: 0.32rem;
      height: 0.32rem;
      background: url("../static/fuel/fixed.png") no-repeat 0 0;
      // background: url("../../../static/fuel/fixed.png") no-repeat 0 0;
      background-size: 100% 100%;
    }

    .name {
      font-size: 0.32rem;
      max-width: 80vw;
      color: #333;
    }

    .icon_right {
      width: 0.32rem;
      height: 0.32rem;
      // background: url("../../../static/fuel/right.png") no-repeat 0 0;
      background: url("../static/fuel/right.png") no-repeat 0 0;
      background-size: 100% 100%;
    }
  }

  .van-number-keyboard {
    &.disabold .van-key--blue {
      background-color: #eaeaea;
    }
  }

  .remit_container {
    .oilGun_container {
      .fuel_remit_top {
        padding: 0.24rem;
        box-sizing: border-box;
        width: 100%;
        background-color: #fff;
        border-radius: 0rem 0rem 0.3rem 0.3rem;

        &.active {
          padding-bottom: 0.2rem;
          border-radius: 0rem 0rem 0.3rem 0.3rem;
        }

        .oilGun_info {
          // display: flex;
          // align-items: center;
          // justify-content: space-between;
          min-height: 0.52rem;
          margin-top: 0.3rem;
          border-top: 1px solid #e5e5e5;
          padding-top: 0.3rem;

          .oilGun_info_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            .oilGun_title {
              font-size: 0.32rem;
              font-weight: 500;
              margin-right: 0.32rem;
              color: #333;
            }

            .oilGun_placeholder {
              color: #aeaeae;
              font-size: 0.28rem;
              font-weight: 500;
            }
          }

          .oli_icon_close {
            width: 0.28rem;
            height: 0.28rem;
            // background: url("../../../static/fuel/close.png") no-repeat 0 0;
            background: url("../static/fuel/close.png") no-repeat 0 0;
            background-size: 100% 100%;
            position: absolute;
            right: 0.24rem;
          }

          .oilGun_value {
            padding-right: 0.4rem;
            color: #333;
            .num {
              font-size: 0.4rem;
              font-weight: 600;
              // margin-right: 0.16rem;
            }

            .name {
              font-size: 0.28rem;
              // color: #34b053;
            }
          }

          .price {
            color: #999;
            font-size: 0.27rem;
            margin-top: 0.3rem;
            // position: absolute;
            // right: 0.24rem;

            // .price_color {
            //   // color: #86ca96;
            // }
          }
        }

        .divider_line {
          position: relative;
          width: 100%;
          // height: 1px;
          margin: 0.16rem 0;
          // background-color: #f5f5f5;

          // &.active {
          //   // background-color: #98cda7;
          // }

          &.input {
            margin: 0;

            .price_list {
              // position: absolute;
              // top: 0.1rem;
              display: flex;
              margin-top: 0.2rem;
              margin-bottom: 0.3rem;

              .price_value {
                width: 1.64rem;
                text-align: center;
                height: 0.7rem;
                line-height: 0.7rem;
                font-size: 0.26rem;
                background-color: #fff;
                border: 1px solid #f6f6f6;
                margin-right: 0.1rem;
                border-radius: 0.16rem;

                &:nth-child(4n) {
                  margin-right: 0;
                }
              }
            }

            // &.active {
            //   // background-color: #98cda7;
            // }
          }
        }

        .amount_of_money {
          .amount_of_money_title {
            font-size: 0.32rem;
            font-weight: 500;
            margin-bottom: 0.2rem;
            color: #333;
          }
          .field_price {
            // padding: 0.35rem 0 0.4rem;
            height: 1rem;
            background: #f7f9fc;
            border: 1px solid #e5e5e5;
            border-radius: 0.2rem;
            display: flex;
            align-items: center;

            &.placeStyle .van-field__body input {
              font-size: 0.32rem;
              font-weight: 400;
            }

            .icon_close {
              width: 0.28rem;
              height: 0.28rem;
              // background: url("../../../static/fuel/close.png") no-repeat 0 0;
              background: url("../static/fuel/close.png") no-repeat 0 0;
              background-size: 100% 100%;
            }

            .van-field__body {
              input {
                font-size: 0.4rem;
                font-weight: 600;
              }
            }

            .discountAmt {
              font-size: 0.28rem;
              color: #32af51;
            }

            .van-field__label {
              color: #333;
              font-size: 0.32rem;
              font-weight: 500;
              width: auto;
              margin-right: 0.32rem;
            }
          }

          // .van-cell {
          //   padding: 6px 16px;
          // }
        }
      }

      .oilGun_main_wraper {
        display: flex;
        flex-direction: column;
        align-items: center;
        // padding: 0 0.24rem;
        margin-top: 0.52rem;

        .oilGun_main_title {
          height: 1.1rem;
          line-height: 1.1rem;
          font-size: 0.28rem;
          font-weight: 600;
        }

        .oilGun_main_content {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .main_card {
            position: relative;
            width: 1.9rem;
            height: 0.8rem;
            margin: 0rem 0.2rem 0.2rem 0rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            background: #f7f9fc;
            border: 1px solid #e5e5e5;
            border-radius: 0.16rem;
            overflow: hidden;
            &.active {
              // background-color: #34b053;
              border: 1px solid #fd6b00;
              opacity: 0.8;
              color: #fd6b00;

              .gunName {
                color: #fd6b00;
              }

              .oilName {
                color: #fd6b00;
              }
              .active_icon {
                display: inline-block !important;
              }
            }

            &:nth-child(3n) {
              margin: 0 0 0.08rem 0;
            }

            .line {
              margin-right: 0.04rem;
              margin-left: 0.06rem;
            }

            .gunName {
              font-size: 0.36rem;
              font-weight: 600;
              color: #333;
              margin-bottom: 0.1rem;
            }

            .oilName {
              font-size: 0.24rem;
              // color: #fd6b00;
            }
            .active_icon {
              width: 14px;
              height: 10px;
              position: absolute;
              right: 0;
              bottom: 0;
              img {
                width: 100%;
              }
            }
          }
        }
      }

      .remit_page_container {
        background-color: #fff;
        padding: 0.3rem;
        margin-top: 0.4rem;
        border-radius: 0.3rem;

        .remit_page_wraper {
          // padding: 0.32rem 0.28rem 0.4rem;
          // background-color: #f6f6f6;
          // border-radius: 0.2rem;

          .stored_radio {
            height: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .stored_card {
              display: flex;
              align-items: center;
              font-size: 0.32rem;
              font-weight: 600;
              color: #333;
              margin-left: 0.16rem;

              .icon {
                width: 0.6rem;
                height: 0.6rem;
                margin-right: 0.16rem;
                border: 1px dashed #ddd;

                &.stored {
                  // background: url("../../../static/vip/a1.svg") no-repeat 0 0;
                  background: url("../static/fuel/pay-cxk.png") no-repeat 0 0;
                  background-size: 100% 100%;
                }

                &.vx {
                  // background: url("../../../static/fuel/vx_remit.png") no-repeat
                  background: url("../static/fuel/pay-wx.png") no-repeat 0 0;
                  background-size: 100% 100%;
                }
              }
            }
          }

          .stored_amt {
            font-size: 0.24rem;
            color: #9095ad;
            padding: 0.1rem 0rem;
          }

          .divider_line {
            width: 100%;
            height: 1px;
            margin: 0.16rem 0;
            background-color: #eee;
          }
        }
      }

      .coupon_info {
        height: 1.3rem;
        margin-top: 0.3rem;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0rem 0.3rem 0rem 0.46rem;
        border-radius: 0.3rem;
        .van-cell {
          background-color: transparent;
          flex: 1;
          padding: 10px 0px;
        }
        img {
          width: 0.6rem;
          height: 0.6rem;
          margin-right: 0.16rem;
          border: 1px dashed #ddd;
        }
      }
    }
  }

  .popup_container {
    .title {
      width: 100%;
      text-align: center;
      height: 1.5rem;
      line-height: 1.5rem;
      font-size: 0.36rem;
      font-weight: 600;
    }

    .popup_main {
      .popup_name {
        box-sizing: border-box;
        padding: 0 0.2rem;
        width: 100%;
        background-color: #f5f6f7;
        height: 0.8rem;
        line-height: 0.8rem;
      }

      .popup_price {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 0.8rem;
        padding: 0 0.2rem;

        .tag {
          color: #666;
        }

        .price {
          color: #666;
        }
      }

      // .popup_preferential {
      // }
    }
  }

  .coupons_popup_container {
    .title {
      width: 100%;
      text-align: center;
      height: 1.1rem;
      line-height: 1.1rem;
      font-size: 0.36rem;
      font-weight: 600;
    }

    .van_popup_main {
      .popup_list {
        box-sizing: border-box;
        padding: 0.3rem;
        margin: 0.3rem;
        background-color: #f5f6f7;
        border-radius: 0.16rem;
        display: flex;

        .left_popup {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 2.2rem;
          height: 1.7rem;
          // background: url("../../../static/coupon/quan1.2x.png") no-repeat 0 0;
          background: url("../static/coupon/quan1.2x.png") no-repeat 0 0;
          background-size: 100% 100%;
          color: #fff;
          margin-right: 8px;

          .valueDesc {
            font-size: 0.4rem;
            margin-bottom: 0.32rem;
          }

          .condition {
            font-size: 0.28rem;
          }

          &.red {
            // background: url("../../../static/coupon/quan2.2x.png") no-repeat 0 0;
            background: url("../static/coupon/quan2.2x.png") no-repeat 0 0;
            background-size: 100% 100%;
          }
        }

        .right_popup {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            width: 1.5rem;
            text-align: center;
            height: 0.6rem;
            line-height: 0.6rem;
            background-color: #fad25e;
            border-radius: 0.6rem;

            &.red {
              background-color: #ed9381;
            }
          }

          // .title {
          // }
        }

        .radio {
          position: absolute;
          right: 0.32rem;

          input {
            zoom: 1.5;
          }
        }
      }
    }
  }
}

.bottom_fix_bar {
  z-index: 9999;
  width: 100%;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0rem;

  .fix_bar_main {
    width: 90vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    .car_container {
      display: flex;
      align-items: center;
      flex: 1;
      // border-top: 1px solid #eee;

      .icon_car {
        width: 0.6rem;
        height: 0.4rem;
        margin-right: 0.3rem;
        margin-left: 0.36rem;

        .van-info {
          background-color: #32af51;
        }
      }

      .price_bar {
        font-size: 0.28rem;
        color: #fc474b;

        .price_value {
          font-size: 0.32rem;
          font-weight: 600;
        }
      }

      .price_coupon {
        font-size: 0.2rem;
        color: #999;
        // font-weight: 500;

        .coupon_value {
          color: #32af51;
        }
      }
    }

    .van-button--warning {
      background-color: #fd6b00;
      height: 0.9rem;
    }
    .van-button--normal {
      padding: 0 23px;
    }
  }
}
</style>
